/**
 * Created by zhulizhe on 2018/7/27.
 */
import React from 'react';

class PriceDetailHeader extends React.Component{
  render(){
    const {title} = this.props ;
    return <div style={styles.header}>
      <div style={{flex:2,paddingRight:20,paddingLeft:20}}>{title}</div>
      <div style={{flex:1}}>官方报价</div>
      <div style={{flex:1}}>会员价</div>
      <div style={{flex:1,color:'green'}}>优惠</div>
    </div>
  }
}


export class PriceDataList extends React.Component{
  render(){
    const {title,list} = this.props;
    return <div>
      <PriceDetailHeader title={title}/>
      {list.map((data,index)=>{
        return <div key={index+'#'} style={styles.content}>
          <div style={{flex:2,paddingRight:20,paddingLeft:20}}>{data.label}</div>
          <div style={{flex:1}}>{data.officialPrice}</div>
          <div style={{flex:1}}>{data.memberPrice}</div>
          <div style={{flex:1,color:'green'}}>-{data.freePrice}</div>
        </div>
      })}
    </div>
  }
}

const styles = {
  header:{
    display:'flex',
    flexDirection:'row',
    justifyContent:'space-around',
    alignItems:'center',
    height:30,
    paddingTop:10,
    paddingBottom:10,
    backgroundColor:'#e2e2e2'
  },
  content:{
    display:'flex',
    flexDirection:'row',
    // justifyContent:'space-around',
    alignItems:'center',
    height:40,
    paddingTop:10,
    paddingBottom:10,
    backgroundColor:'#f5f5f5'
  }
}
